<template>
	<div>
	  <nav-header></nav-header>
	  <nav-bread>
	  	<span slot="bread">Goods</span>
	  </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a href="javascript:void(0)" class="price" @click="sortGoods">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" :class="{'filterby-show':filterBy}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd><a href="javascript:void(0)" :class="{'cur':priceChecked=='all'}" @click="priceChecked='all'">All</a></dd>
                <dd v-for="(price,index) in priceFilter">
                  <a href="javascript:void(0)" :class="{'cur':priceChecked==index}" @click="setPriceFilter(index)">{{price.startPrice}} - {{price.endPrice}}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="item in goodsList">
                    <div class="pic">
                      <a href="javascript:;"><img v-lazy="'/static/'+item.productImage" :alt="item.productName"></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="view-more-normal" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" v-show="loadingFlag">
                	<img src="/static/loading-svg/loading-spin.svg" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
          <p slot="message">
             请先登录,否则无法加入购物车!
          </p>
          <div slot="btnGroup">
              <a class="btn btn--m" href="javascript:;" @click="mdShow = false">关闭</a>
          </div>
      </modal>
      <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
        <p slot="message">
          <svg class="icon-status-ok">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          </svg>
          <span>加入购物车成功!</span>
        </p>
        <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
          <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
        </div>
      </modal>
      <div class="md-overlay" v-show="overlayFlag" @click="closePop"></div>
	  <nav-footer></nav-footer>
    </div>
</template>
<script>
	import './../assets/css/base.css';
	import './../assets/css/product.css';
	import NavHeader from './../components/NavHeader';
    import NavFooter from './../components/NavFooter';
    import NavBread from '@/components/NavBread';
    import Modal from './../components/Modal'
	import axios from 'axios';

	export default {
		data(){
			return {
				priceFilter:[
					{
						startPrice:'0.00',
						endPrice:'500.00'
					},
					{
						startPrice:'500.00',
						endPrice:'1000.00'
					},
					{
						startPrice:'1000.00',
						endPrice:'2000.00'
					}
				],
				priceChecked:'all',
				filterBy:false,
				overlayFlag:false,
				sortFlag:true,
				page:1,
				pageSize:8,
				goodsList:[],
				busy:true,
				loadingFlag:false,
                mdShow:false,
                mdShowCart:false,
			}
		},
		components:{
			NavHeader,
			NavFooter,
			NavBread,
			Modal
		},
		mounted(){
			this.getGoodsList();
		},
		methods:{
			getGoodsList(flag){
				var param = {
					page:this.page,
					pageSize:this.pageSize,
					sort:this.sortFlag?1:-1,
					priceLevel:this.priceChecked
				}
				this.loadingFlag = true;
				axios.get('/goods',{
					params:param
				}).then((result)=>{
					let res = result.data;
					this.loadingFlag = false;
					if(res.status=='0'){
						if(flag){ //为真说明是分页，需要累加
							this.goodsList = this.goodsList.concat(res.result.list);
							if(res.result.count < this.pageSize){
								this.busy = true;
							}else{
								this.busy = false;
							}
						}else{
							this.goodsList = res.result.list;
							this.busy = false;
						}
					}else{
						this.goodsList = [];
					}
				})
			},
			//价格过滤
			setPriceFilter(index){
				this.priceChecked = index;
				this.closePop();
				this.page = 1;
				this.getGoodsList();
			},
			//价格升降序
			sortGoods(){
				this.sortFlag = !this.sortFlag;
				this.page = 1;
				this.getGoodsList();
			},
			//滚动加载
			loadMore(){
				this.busy = true;
				setTimeout(()=>{
					this.page++;
					this.getGoodsList(true);
				},500)
			},
			//加入购物车
			addCart(productId){
				axios.post('/goods/addCart',{
					productId:productId
				}).then((result)=>{
					var res = result.data;
					if(res.status==0){
						this.$store.commit('updateCartCount',1);
                        this.mdShowCart = true;
					}else{
                        this.mdShow = true;
					}
				})
			},
			//关闭模态框
            closeModal(){
              this.mdShow = false;
              this.mdShowCart = false;
            },
            showFilterPop(){
              this.filterBy = true;
              this.overlayFlag = true;
            },
            //关闭遮罩
            closePop(){
              this.filterBy = false;
              this.overlayFlag = false;
              this.mdShowCart = false;
            }
		}
	}
</script>